<template>
	<breadCrumb ref="breadcrumb" :item="item"></breadCrumb>
	<div class="module-common-wrapped">
		<div class="module-common-content">
			<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="产品列表" name="first">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-common-header">
								<div class="search-wrapped">
									<el-input v-model="productId" class="w-50 m-2" size="large" placeholder="输入入库编号进行搜索"
										:prefix-icon="Search" @change="searchProductFn()" clearable
										@clear="getProductFirstPageList" />
								</div>
								<div class="button-wrapped">
									<el-button type="primary" @click="productInWarehouse">产品入库</el-button>

								</div>
							</div>
							<!-- 表格部分 -->
							<div class="module-common-talbe">
								<el-table :data="tableData" border style="width: 100%">
									<el-table-column type="index" width="50"></el-table-column>
									<el-table-column prop="product_id" label="入库编号" width="200"></el-table-column>
									<el-table-column prop="product_name" label="产品名称" width="160"></el-table-column>
									<el-table-column prop="product_category" label="产品类别" width="100"></el-table-column>
									<el-table-column prop="product_unit" label="单位" width="180"></el-table-column>
									<el-table-column prop="product_inwarehouse_number" label="库存数量"
										width="100"></el-table-column>
									<el-table-column prop="product_single_price" label="产品单价"
										width="150"></el-table-column>
									<el-table-column prop="product_all_price" label="库存总价"
										width="100"></el-table-column>
									<el-table-column prop="product_status" label="库存状态" width="100">
										<template #default="{ row }">
											<el-tag class="ml-2" type="danger"
												v-if="row.product_inwarehouse_number < 100">库存较少</el-tag>
											<el-tag class="ml-2" type="success"
												v-else-if="row.product_inwarehouse_number >= 100 && row.product_inwarehouse_number <= 300">库存正常</el-tag>
											<el-tag class="ml-2" type="success"
												v-else-if="row.product_inwarehouse_number > 300">库存过剩</el-tag>
										</template>
									</el-table-column>
									<el-table-column prop="product_create_person" label="入库负责人"
										width="100"></el-table-column>
									<el-table-column prop="product_create_time" label="入库时间" width="200">
										<template #default="{ row }">
											<div>{{ row.product_create_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_update_time" label="最后修改时间" width="200">
										<template #default="{ row }">
											<div>{{ row.product_update_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="in_memo" label="入库备注" width="180"></el-table-column>
									<el-table-column prop="address" label="操作" width="300" fixed="right">
										<template #default="{ row }">
											<div>
												<el-button type="primary" @click="applyOut(row)"
													:disabled='row.product_out_status == "申请出库" || row.product_inwarehouse_number == 0'>申请出库</el-button>
												<el-button type="success" @click="openEdit(row)"
													:disable='row.product_out_status == "申请出库"'>修改</el-button>
												<el-button type="danger" @click="openDelete(row.id)"
													:disable='row.product_out_status == "申请出库"'>删除</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination :page-size="1" :current-page="paginationData.productcurrentPage"
								:pager-count="7" :page-count="paginationData.productpageCount"
								:total="paginationData.productTotal" @current-change="ProductCurrentChange"
								layout="prev, pager, next" />
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="审核列表" name="second">
					<div class="pane-content">
						<div class="pane-top">
							<div class="module-common-header">
								<div class="search-wrapped">
									<el-input v-model="productOutId" class="w-50 m-2" size="large"
										placeholder="输入入库编号进行搜索" :prefix-icon="Search" @change="searchApplyProductFn()"
										clearable @clear="getApplyProductFirstPageList" />
								</div>
								<div class="button-wrapped">

								</div>
							</div>
							<!-- 表格部分 -->
							<div class="module-common-talbe">
								<el-table :data="applytableData" border style="width: 100%">
									<el-table-column type="index" width="50"></el-table-column>
									<el-table-column prop="product_out_id" label="申请出库编号" width="200"></el-table-column>
									<el-table-column prop="product_name" label="产品名称" width="200"></el-table-column>
									<el-table-column prop="product_out_number" label="申请出库数量"
										width="180"></el-table-column>
									<el-table-column prop="product_out_price" label="申请出库总价"
										width="180"></el-table-column>
									<el-table-column prop="product_out_apply_person" label="申请人"
										width="100"></el-table-column>
									<el-table-column prop="product_apply_time" label="审核出库时间" width="180">
										<template #default="{ row }">
											<div>{{ row.product_apply_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_out_audit_person" label="审核人"
										width="200"></el-table-column>
									<el-table-column prop="product_audit_time" label="审核时间" width="180">
										<template #default="{ row }">
											<div>{{ row.product_audit_time?.slice(0, 10) }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="product_out_status" label="审核状态"
										width="150"></el-table-column>
									<el-table-column prop="apply_memo" label="申请出库备注" width="200"></el-table-column>
									<el-table-column prop="audit_memo" label="审核备注" width="100"></el-table-column>
									<el-table-column prop="address" label="操作" width="300" fixed="right">
										<template #default="{ row }">
											<div>
												<el-button type="primary"
													@click="withdrawProduct(row.id)">撤回申请</el-button>
												<el-button type="success"
													:disabled="row.product_out_status == '申请出库' || row.product_inwarehouse_number == 0"
													@click="againApply(row)">再次申请</el-button>
												<el-button type="danger" @click="auditProductFn(row)">审核</el-button>
											</div>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</div>
						<div class="table-footer">
							<el-pagination :page-size="1" :current-page="paginationData.applyProductcurrentPage"
								:pager-count="7" :page-count="paginationData.applyProductpageCount"
								:total="paginationData.applyProductTotal" @current-change="ApplyProductCurrentChange"
								layout="prev, pager, next" />
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
	<!-- 入库操作影响产品列表 -->
	<product_in_warehouseVue ref="inware" @success="getProductFirstPageList"></product_in_warehouseVue>
	<!-- 申请操作影响审核列表 -->
	<applyVue ref="applyp" @success="changeTwoPageList"></applyVue>
	<!-- 编辑操作影响产品列表 -->
	<editVue ref="editp" @success="getProductFirstPageList"></editVue>
	<!-- 删除操作影响产品列表 -->
	<deleteVue ref="deletep" @success="getProductFirstPageList"></deleteVue>
	<!-- 审核操作影响产品列表，审核列表 -->
	<audit ref="auditp" @success="changeTwoPageList"></audit>
	<!-- 撤回操作影响产品列表，审核列表 -->
	<withdraw ref="withdrawp" @success="changeTwoPageList"></withdraw>
	<!-- 再次申请操作影响审核列表 -->
	<again_apply ref="againp" @success="getApplyProductListLengthFn"></again_apply>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import breadCrumb from '@/components/bread_crumb.vue'
import { Search } from '@element-plus/icons-vue';
import product_in_warehouseVue from '../components/product_in_warehouse.vue';
import applyVue from '../components/apply.vue'
import editVue from '../components/edit_product.vue';
import deleteVue from '../components/delete_product.vue';
import audit from '../components/audit.vue';
import withdraw from '../components/withdraw.vue';
import again_apply from '../components/again_apply.vue';
import { getProductList, applyProductList, searchProductById, searchProductByApplyId, getProductLength, getApplyProductLength, returnProductListData, returnApplyPoductListData } from '@/api/product'
import { bus } from '@/utils/mitt.js'
import type { TabsPaneContext } from 'element-plus'

//面包屑
const breadcrumb = ref()
//面包屑参数
const item = ref({
	first: '产品管理',
	second: '产品列表',
})
const handleClick = (tab: TabsPaneContext, event: Event) => {
	// console.log(tab.props.label, event)
	if (tab.props.label == '产品列表') {
		getProductFirstPageList()
	}
	if (tab.props.label == '审核列表') {
		getApplyProductFirstPageList()
	}
}
const activeName = ref('first')

// 产品入库编号
const productId = ref<number>()
// 产品申请出库编号
const productOutId = ref<number>()
// 产品表格
const tableData = ref([])
// 产品申请出库表格
const applytableData = ref([])


//  分页数据
const paginationData = reactive({
	// 产品总数
	productTotal: 1,
	// 申请总数
	applyProductTotal: 1,
	// 产品列表总页数
	productpageCount: 1,
	// 产品列表当前所处页数
	productcurrentPage: 1,
	// 申请列表总页数
	applyProductpageCount: 1,
	// 申请列表当前所处页数
	applyProductcurrentPage: 1,

})
// 获取产品列表的页数
const getProductListLengthFn = async () => {
	const res = await getProductLength()
	paginationData.productTotal = res.length
	paginationData.pageCount = Math.ceil(res.length / 10)
}
getProductListLengthFn()
// 获取申请列表的页数
const getApplyProductListLengthFn = async () => {
	const res = await getApplyProductLength()
	paginationData.applyProductTotal = res.length
	paginationData.applyProductpageCount = Math.ceil(res.length / 10)
}
getApplyProductListLengthFn()
// 默认获取产品列表第一页的数据
const getProductFirstPageList = async () => {
	tableData.value = await returnProductListData(1)
}
getProductFirstPageList()
// 默认获取审核列表第一页的数据
const getApplyProductFirstPageList = async () => {
	applytableData.value = await returnApplyPoductListData(1)
}
getApplyProductFirstPageList()

// 更新产品列表及申请列表的第一页数据
const changeTwoPageList = () => {
	getProductFirstPageList()
	getApplyProductFirstPageList()

}
// 产品列表监听换页
const ProductCurrentChange = async (value: number) => {
	paginationData.productcurrentPage = value
	tableData.value = await returnProductListData(paginationData.productcurrentPage)
}
// 申请列表监听换页
const ApplyProductCurrentChange = async (value: number) => {
	paginationData.applyProductcurrentPage = value
	applytableData.value = await returnApplyPoductListData(paginationData.applyProductcurrentPage)
}

/* // 获取产品列表
const getProductListFn = async () => {
	tableData.value = await getProductList()
}
//  获取产品审核列表
const applyProductListFn = async () => {
	applytableData.value = await applyProductList()
}
applyProductListFn() */
/* const changeProductListFn = () => {
	getProductListFn()
	applyProductListFn()
} 
getProductListFn()*/
// 通过产品入库ID去搜索
const searchProductFn = async () => {
	tableData.value = await searchProductById(productId.value)
}
// 通过产品申请出库ID去搜索
const searchApplyProductFn = async () => {
	applytableData.value = await searchProductByApplyId(productOutId.value)
}

// 打开产品入库
const inware = ref()
const productInWarehouse = () => {
	inware.value.open()
}
// 产品申请出库
const applyp = ref()
const applyOut = (row: any) => {
	bus.emit('applyProductId', row)
	applyp.value.open()
}
// 编辑产品信息
const editp = ref()
const openEdit = (row: any) => {
	bus.emit('editProductId', row)
	editp.value.open()
}
// 删除产品信息
const deletep = ref()
const openDelete = (id: number) => {
	bus.emit('deleteProductId', id)
	deletep.value.open()
}

// 审核产品
const auditp = ref()
const auditProductFn = (row: any) => {
	bus.emit('auditProductInfor', row)
	auditp.value.open()
}

// 撤回产品申请
const withdrawp = ref()
const withdrawProduct = (id: number) => {
	bus.emit('withdrawId', id)
	withdrawp.value.open()
}

// 再次申请出库
const againp = ref()
const againApply = (row: any) => {
	// console.log(row);
	bus.emit('againId', row)
	againp.value.open()
}
</script>

<style scoped lang="scss">
:deep(.el-table .cell) {
	font-weight: 400;
}
</style>